<!--
 * @页面名称:二维码扫描
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="pag">
    <div class="video-show" />
    <video id="video" ref="video" class="video vjs-fluid" autoplay />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { BrowserMultiFormatReader } from "@zxing/library";

// 这个就是从@zxing/library导出来的方法，new一个实例
const codeReader = ref(new BrowserMultiFormatReader());
// 这个，用来储存扫码得到的结果
const textContent = ref();
// 这个，就是当前调用的摄像头的索引
const num = ref(6);
// 这个就是扫描到的摄像头的数量
const videoLength = ref();
const openScan = async () => {
  codeReader.value
    .getVideoInputDevices()
    .then(videoInputDevices => {
      console.log(videoInputDevices);

      // 记录一下扫描到的摄像头数量，这个videoInputDevices是个数组，里面有扫描到的摄像头数据
      videoLength.value = videoInputDevices.length;
      // 这步我们来决定一下调用第几个摄像头
      const firstDeviceId = videoInputDevices[num.value].deviceId;
      // 这调用另一个方法
      decodeFromInputVideoFunc(firstDeviceId, videoInputDevices.length);
    })
    .catch(err => {
      num.value = 1;
      openScan();
      console.log(err);
    });
};
//这就是在openScan里调的另一个方法，传入想调用的摄像头id和摄像头数量
const decodeFromInputVideoFunc = (firstDeviceId: string | null, length: number) => {
  codeReader.value.reset(); // 重置
  textContent.value = null; // 重置
  codeReader.value.decodeFromInputVideoDeviceContinuously(firstDeviceId, "video", (result: any, err) => {
    textContent.value = null;
    if (result) {
      textContent.value = result;
      console.log(result, "扫描结果");
      if (textContent.value) {
        setTimeout(() => {
          window.location.href = textContent.value;
          // 记得重置，不然在微信里用会有问题
          textContent.value = null;
          codeReader.value && codeReader.value.reset();
        }, 100);
      }
    }
    if (err && !err) {
      if (num.value <= length) {
        openScan();
      }
      console.error(err);
    }
  });
};

// onBeforeUnmount(() => {
//   codeReader.reset();
// });
onMounted(() => {
  openScan();
});
</script>

<style scoped lang="scss">
.video {
  width: 100vw;
  height: 100vh;
  z-index: 1;
}
.video-show {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
  height: 70vw;
  z-index: 2;
  background: linear-gradient(to left, #fff, #fff) left top no-repeat, linear-gradient(to bottom, #fff, #fff) left top no-repeat,
    linear-gradient(to left, #fff, #fff) right top no-repeat, linear-gradient(to bottom, #fff, #fff) right top no-repeat,
    linear-gradient(to left, #fff, #fff) left bottom no-repeat, linear-gradient(to bottom, #fff, #fff) left bottom no-repeat,
    linear-gradient(to left, #fff, #fff) right bottom no-repeat, linear-gradient(to left, #fff, #fff) right bottom no-repeat;
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}
.tip {
  width: 10vw;
  height: 10vw;
  background-color: rgb(45, 236, 45);
  border: 1px solid #ffffff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.bgc-f4f4f4 {
  background-color: #363636;
}

.page {
  position: relative;
  overflow-y: auto;
  position: relative;
  height: 100vh;
}
.change {
  z-index: 100;
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 60px;
  /* align-content: center; */
}
.el-icon-refresh {
  color: #000;
  font-size: 25px;
}
</style>
